<template>
  <div class="container learnstyle-page">
    <el-row>
      <div>
        <div class="subject">
          <el-divider class="wow bounceInRight faster">
            成绩详情
          </el-divider>

          <el-row :gutter="20">
            <el-col :span="10">
              <div class="grid-content bg-purple">考试名称: {{examInfo.testPaperInfoName}}</div>
            </el-col>
            <el-col :span="7"><div class="grid-content bg-purple">参考时间: {{examInfo.createDate}}</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">考试时间: {{examInfo.testPaperExamTime}}分钟</div></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10">
              <div class="grid-content bg-purple">考试用时: {{examInfo.examTime}}</div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                系统评分: <el-tag type="success">{{examInfo.systemMark}}分</el-tag>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                教师评分: <el-tag type="success">{{examInfo.teacherMark}}分</el-tag>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10">
              <div class="grid-content bg-purple">评卷人: {{examInfo.correctName}}</div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                答对题数: <el-tag type="success">{{examInfo.rightNumber}}题 </el-tag>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                 答错题数: <el-tag type="danger">{{examInfo.errorNumber}}题</el-tag>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="exam_list">
          <el-divider class="wow bounceInRight faster">
            试题列表
          </el-divider>

          <div>
            <el-card v-for="(item, index) in examQuestionAnswerList" :key="index" class="box-card">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold">{{item.questionTypeName}}</span>
              </div>
              <div v-for="(question, itemIndex) in item.examQuestionAnswerList" :key="itemIndex" class="text item">
                <label style="font-weight: bold">{{question.questionIndex}}.</label>
                <div style="display: inline-block" v-html="question.content"></div>

                <el-row class="test-opt" style="padding-left: 20px;margin-top: 15px">
                  <!-- 单选题 -->
                  <template v-if="question.questionType === 1">
                    <el-radio-group
                      v-for="(item, index) in question.optionList"
                      :key="index"
                      v-model="question.studentAnswer">
                      <el-radio :label="item.label">{{item.label}}. &nbsp;
                        <label v-html="item.option_name"></label>
                      </el-radio>
                    </el-radio-group>
                  </template>
                </el-row>

                <!-- 多选题 -->
                <el-row v-if="question.questionType === 2" class="option">
                  <el-checkbox-group
                    v-for="(item, index) in question.optionList"
                    :key="index"
                    v-model="question.studentAnswer">
                    <el-checkbox :label="item.label">{{item.label}}. &nbsp;
                      <label v-html="item.option_name"></label>
                    </el-checkbox>
                  </el-checkbox-group>
                </el-row>

                <div class="text item">
                  分值:  <el-tag type="success">{{question.questionMark}}分</el-tag>
                </div>

                <div class="text item">
                  批改状态: <el-tag type="danger">{{question.correctStatus | getCorrectStatus}}</el-tag>
                </div>

                <div class="text item">
                  你的答案: {{question.studentAnswer}}
                </div>

                <div v-if="question.correctStatus !== 2"  class="text item">
                  得分: <el-tag >{{question.studentMark}}分</el-tag>
                </div>

                <div class="text item" v-if="isSubjective(question.questionType)">
                   <el-image
                     v-for="(url, urlIndex) in question.studentAnswer"
                     :key="urlIndex"
                     style="width: 100px; height: 100px"
                     :src="fileHost + url"
                     fit="fill"></el-image>
                </div>

                <div class="text item">
                  正确答案: {{question.answer}}
                </div>

                <div class="text item">
                  解析: <el-tag v-if="!question.analysis" type="danger">暂无解析</el-tag>
                </div>

                <div
                  v-if="question.analysis"
                  v-html="question.analysis" class="text item">
                </div>

                <div style="border-bottom: 1px solid #EBEEF5" class="text item">
                  <span class="play" ><i class="el-icon-video-play"></i> 视频点评 </span>
                <!--  讲解视频: <i class="el-icon-video-camera-solid"></i>-->
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
  let that = null
  export default {
    name: 'exam',
    data () {
      return {
        fileHost: this.$store.state.common.fileHost,
        examInfo: {},
        examInfoId: null,
        examQuestionAnswerList: []
      }
    },

    beforeCreate () {
      that = this
    },

    mounted () {
      this.examInfoId = this.$route.params.id
      this.getExamInfoById(this.examInfoId)
    },

    destroyed () {

    },

    methods: {

      isSubjective (questionType) {
        if (questionType !== 1 && questionType !== 2 && questionType !== 6) {
          return true
        }
        return false
      },

      getExamInfoById (id) {
          this.axios.get(this.$httpApi.httpUrl('/student/exam/selectExamQuestionAnswer/' + id))
            .then(response => {
              let result = response.data.data
              this.examInfo = result.studentExamInfoDto
              let correctType = this.examInfo.correctType
              if (correctType === 1) {
                this.examInfo.correctName = '系统判分'
              } else if (correctType === 2) {
                this.examInfo.correctName = '教师判分'
              } else {
                this.examInfo.correctName = '系统 + 教师判分'
              }
              this.examQuestionAnswerList = result.examQuestionItemResponseList
              let questionIndex = 0
              this.examQuestionAnswerList.forEach(item => {
                let questionList = item.examQuestionAnswerList
                questionList.forEach(subItem => {
                  ++questionIndex
                  subItem.questionIndex = questionIndex
                  if (subItem.questionType === 1 || subItem.questionType === 2) {
                    let options = subItem.options
                    if (options) {
                      subItem.optionList = JSON.parse(options)
                    }
                  }
                  // 试题类型非单选和判断题， 解析答案数组
                  if (subItem.questionType !== 1 && subItem.questionType !== 6) {
                    let studentAnswerStr = subItem.studentAnswer
                    let studentAnswerArray = []
                    if (studentAnswerStr) {
                      studentAnswerStr.split(',').forEach(value => {
                        if (value) {
                          studentAnswerArray.push(value)
                        }
                      })
                      subItem.studentAnswer = studentAnswerArray
                    }
                  }
                })
              })
          })
      }
    },

    filters: {
      getCorrectStatus (val) {
        if (val === 0) {
           return '错误'
        } else if (val === 1) {
          return '正确 '
        } else {
          return '待批改'
        }
      }
    }
  }
</script>
<style>
  .box-card p {
    display: inline-block !important;
  }

  .question_content p {
    display: inline-block !important;
  }

</style>


<style lang='scss' scoped>
  .option {
    margin: 20px;
  }
  .text {
    font-size: 14px;
  }
  .play{display: inline-block;height: 30px;line-height: 30px;padding-left:10px;color: red;cursor: pointer;}
  .item {
    padding: 6px 0;
  }

/*  .box-card {
    width: 480px;
  }*/
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .el-radio-button__inner, .el-radio-group {
    padding-top: 20px !important;
    display: block !important;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 5px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }



</style>
